    <style>
        
        .file-size{
            float: right;
            color: #89a
        }
        
        .file-name{
            display:inline-block;
            vertical-align: middle;
            margin-top:-12px
        }
        
        #edit{
            padding: 6px;
            border: solid 1px #789;
            background-color: #fffabe;
            text-align: left;
            white-space: nowrap;
            overflow: scroll;
        }
        
        video{
            margin:0px auto;
        }
        
        pre{
            white-space:pre-wrap;
            white-space:-moz-pre-wrap;
            white-space:-o-pre-wrap;
            word-wrap:break-word;
        }
        
    </style>
</head>
<body>
    
    <div class="container">
        <?php echo new Manager; ?>
    <div>
     
    <!-- 模态框 begin -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
 
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">模态框头部</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
 
          <!-- 模态框主体 -->
          <div class="modal-body" style="text-align:center">
            模态框内容..
          </div>
 
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>
 
        </div>
      </div>
    </div>
    <!-- 模态框 end. -->
        
<script>
    
    //图片点击事件
    function pictureFunc(route){
        $(".modal-title").html("图片显示：");
        $(".modal-body").html("<img src='./image.php?url=" + route + "' width='100%'>");
        $("#myModal").modal();
    }
    
    //文本文件点击事件
    function textFunc(str, url){
        
        /*
          用 php 的 urlencode 编码后，用 js 的 decodeURIComponent 解码
          空格会产生 + 号。
          
          处理方法：要先替换 + 号为空格，再转码；
          否则，文字里的空格全是 + 号，并且与正常的 + 号无法区分
          如：“这是个数学等式+3+++2+=+5+是否正确。”
        */
        ///////////////////////////////////////////////////////////////////
        var str1 = str.replace(/\+/g, " ");
        var str2 = decodeURIComponent(str1);
        //////////////////////////////////////////////////////////////////
        
        $(".modal-title").html("文字编辑：");

        var content = [
                '<form action="<?php /*不能使用此代码，否则后端接收不到参数 echo htmlspecialchars($_SERVER["PHP_SELF"]);*/?>" method="post">',
                '<input type="hidden" id="edit2url" name="edit2url" value="' + url + '">',
                '<pre><textarea id="edit" name="edit" style="overflow:auto;width:100%;height: 600px">',
                str2,
                '</textarea></pre><div style="text-align:center;padding-top:8px">',
                '<input type="submit" value="保存" class="btn btn-info">',
                '</div></form>'
        ].join("");
        
        $(".modal-body").html(content);
        $("#myModal").modal();
        
        /*
          h5 的 web 存储功能，sessionStorage对象存储，
          当用户关闭浏览器窗口后，数据会被删除。
          存储当前 url 地址，在后端写入文件后，方便返回到当前 url 地址
        */
        if(typeof(Storage)!=="undefined"){
            sessionStorage.urlname = location.href;
        }else{
            alert("对不起，您的浏览器不支持 web 存储，有的功能无法使用！");
        }
    }
    
    //视频文件点击事件，h5 只支持 mp4、webm、ogg三种文件格式，
    //因为 ogg 格式与音乐文件重叠，这里舍去了ogg 格式
    function videoFunc(url, extention){
        $(".modal-title").html("视频显示：");

        var mp4 = [
                '<video width="320" height="240" controls>',
                '<source src="',
                 url,
                '" type="video/mp4"></video>'
        ].join('');
        
        var webm = [
                '<video width="320" height="240" controls>',
                '<source src="',
                 url,
                '" type="video/webm"></video>'
        ].join('');
        
        var default1 = [
                '<p style="color:red;text-align:center"><strong>',
                'h5页面不支持该文件显示！',
                '</strong></p>'
        ].join('');

        switch(extention.trim()){
            case "mp4":
                $(".modal-body").html(mp4);
                break;
            case "webm":
                $(".modal-body").html(webm);
            default:
                $(".modal-body").html(default1);
        }
        
        $("#myModal").modal();
    }
    
    //音频文件点击事件，h5 只支持 mp3、wav、ogg 三种文件格式
    function musicFunc(url, extention){
        $(".modal-title").html("音频显示：");
        
        var ogg = [
                '<audio controls>',
                '<source src="',
                 url,
                '" type="audio/ogg"></audio>'
        ].join('');
        
        var mp3 = [
                '<audio controls>',
                '<source src="',
                 url,
                '" type="audio/mp3"></audio>'
        ].join('');
        
        var wav = [
                '<audio controls>',
                '<source src="',
                 url,
                '" type="audio/wav"></audio>'
        ].join('');
        
        var default1 = [
                '<p style="color:red;text-align:center"><strong>',
                'h5页面不支持该文件显示！',
                '</strong></p>'
        ].join('');

        switch(extention.trim()){
            case "mp3":
                $(".modal-body").html(mp3);
                break;
            case "wav":
                $(".modal-body").html(wav);
                break;
            case "ogg":
                $(".modal-body").html(ogg);
                break;
            default:
                $(".modal-body").html(default1);
        }
        
        $("#myModal").modal();
    }
    
    //未识别文件的点击事件
    function otherFunc(){
        $(".modal-title").html("未知文件？");
        
        var other = [
                '<p style="color:red;text-align:center"><strong>',
                '<?=$person?>错误，不能识别此文件！',
                '</strong></p>'
        ].join('');
        
        $(".modal-body").html(other);
        $("#myModal").modal();
    }
    
</script>